{% extends "base.html" %}
{% load static %}
{% load form_utils %}

{% block title %}{{ title }} - ExamPulse{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'users/css/target-score-form.css' %}">
{% endblock %}

{% block content %}
<div class="target-form-container">
    <div class="row justify-content-center w-100">
        <div class="col-12 col-xl-10">
            <div class="card target-form-card">
                <div class="card-header-custom">
                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                        <div>
                            <h4 class="mb-2">
                                <i class="bi bi-bullseye me-2"></i>{{ title }}
                            </h4>
                            <div class="student-info-badge">
                                <i class="bi bi-person-circle me-1"></i>
                                学生：{{ student.name }}
                                {% if target_score %}
                                <span class="ms-2">
                                    <i class="bi bi-journal-text me-1"></i>{{ target_score.display_name }}
                                </span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="text-end">
                            <div class="text-white-50">
                                {% if target_score %}编辑{% else %}创建{% endif %}目标成绩
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body p-4 p-md-5">
                    <!-- 表单 -->
                    <form id="targetScoreForm" method="post" novalidate
                          {% if target_score %}
                              action="{% url 'users:target_score_update' student.id target_score.id %}"
                          {% else %}
                              action="{% url 'users:target_score_create' student.id %}"
                          {% endif %}>

                        {% csrf_token %}

                        <!-- 科目选择区域 -->
                        <div class="form-section">
                            <h5 class="section-title">
                                <i class="bi bi-journal-check"></i>科目选择
                            </h5>
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <label for="{{ form.subject_category.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-book text-primary"></i>{{ form.subject_category.label }}
                                    </label>
                                    {{ form.subject_category }}
                                    {% if form.subject_category.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.subject_category.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    <div class="form-text">
                                        选择要设定目标的科目（仅显示学生实际考试的科目）
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="region-info-card">
                                        <div class="region-header">
                                            <i class="bi bi-geo-alt"></i>
                                            考试地区信息
                                        </div>
                                        <div class="region-content">
                                            <strong>{{ student.target_exam_region }}</strong>
                                            <small class="text-muted d-block">
                                                {% if student.target_exam_region == '北京' %}
                                                    政治压分严重地区
                                                {% elif student.target_exam_region == '上海' %}
                                                    判卷严格地区
                                                {% elif student.target_exam_region == '江苏' or student.target_exam_region == '浙江' %}
                                                    判卷较严地区
                                                {% else %}
                                                    标准判卷地区
                                                {% endif %}
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 分数目标区域 -->
                        <div class="form-section">
                            <h5 class="section-title">
                                <i class="bi bi-graph-up"></i>分数目标设定
                            </h5>
                            
                            <!-- 分数预览卡片 -->
                            <div class="score-preview-card" id="scorePreview">
                                <div class="score-preview-header">
                                    <span>目标分数预览</span>
                                    <small class="text-muted">（考虑地域影响后）</small>
                                </div>
                                <div class="score-preview-grid">
                                    <div class="score-preview-item ideal">
                                        <div class="score-label">理想目标</div>
                                        <div class="score-value" id="idealPreview">0</div>
                                        <div class="score-unit">分</div>
                                    </div>
                                    <div class="score-preview-item realistic">
                                        <div class="score-label">实际目标</div>
                                        <div class="score-value" id="realisticPreview">0</div>
                                        <div class="score-unit">分</div>
                                    </div>
                                    <div class="score-preview-item safety">
                                        <div class="score-label">保底目标</div>
                                        <div class="score-value" id="safetyPreview">0</div>
                                        <div class="score-unit">分</div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <label for="{{ form.ideal_target.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-stars text-warning"></i>{{ form.ideal_target.label }}
                                    </label>
                                    <div class="score-input-group">
                                        {{ form.ideal_target }}
                                        <span class="score-suffix">分</span>
                                    </div>
                                    {% if form.ideal_target.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.ideal_target.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    <div class="form-text">
                                        努力争取达到的最高分数
                                    </div>
                                </div>

                                <div class="col-md-6 mb-4">
                                    <label for="{{ form.realistic_target.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-check-circle text-success"></i>{{ form.realistic_target.label }}
                                    </label>
                                    <div class="score-input-group">
                                        {{ form.realistic_target }}
                                        <span class="score-suffix">分</span>
                                    </div>
                                    {% if form.realistic_target.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.realistic_target.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    <div class="form-text">
                                        比较有把握达到的分数
                                    </div>
                                </div>

                                <div class="col-md-6 mb-4">
                                    <label for="{{ form.safety_target.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-shield-check text-info"></i>{{ form.safety_target.label }}
                                    </label>
                                    <div class="score-input-group">
                                        {{ form.safety_target }}
                                        <span class="score-suffix">分</span>
                                    </div>
                                    {% if form.safety_target.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.safety_target.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    <div class="form-text">
                                        必须确保的最低分数
                                    </div>
                                </div>

                                <div class="col-md-6 mb-4">
                                    <label for="{{ form.current_level.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-speedometer2 text-primary"></i>{{ form.current_level.label }}
                                    </label>
                                    <div class="score-input-group">
                                        {{ form.current_level }}
                                        <span class="score-suffix">分</span>
                                    </div>
                                    {% if form.current_level.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.current_level.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    <div class="form-text">
                                        最近测试或评估的分数
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 难度与信心评估 -->
                        <div class="form-section">
                            <h5 class="section-title">
                                <i class="bi bi-clipboard-data"></i>难度与信心评估
                            </h5>
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <label for="{{ form.base_difficulty.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-bar-chart text-info"></i>{{ form.base_difficulty.label }}
                                    </label>
                                    {{ form.base_difficulty }}
                                    {% if form.base_difficulty.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.base_difficulty.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6 mb-4">
                                    <label for="{{ form.goal_difficulty.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-graph-up-arrow text-warning"></i>{{ form.goal_difficulty.label }}
                                    </label>
                                    {{ form.goal_difficulty }}
                                    {% if form.goal_difficulty.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.goal_difficulty.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6 mb-4">
                                    <label for="{{ form.confidence_level.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-emoji-smile text-success"></i>{{ form.confidence_level.label }}
                                    </label>
                                    <div class="confidence-input-group">
                                        {{ form.confidence_level }}
                                        <span class="confidence-suffix">%</span>
                                    </div>
                                    {% if form.confidence_level.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.confidence_level.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    <div class="confidence-visual mt-2">
                                        <div class="confidence-bar">
                                            <div class="confidence-fill" id="confidenceFill" style="width: 0%"></div>
                                        </div>
                                        <div class="confidence-labels">
                                            <span>0%</span>
                                            <span>50%</span>
                                            <span>100%</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 mb-4">
                                    <label for="{{ form.study_phase.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-compass text-primary"></i>{{ form.study_phase.label }}
                                    </label>
                                    {{ form.study_phase }}
                                    {% if form.study_phase.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.study_phase.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- 重点与策略 -->
                        <div class="form-section">
                            <h5 class="section-title">
                                <i class="bi bi-lightbulb"></i>重点与策略
                            </h5>
                            <div class="row">
                                <div class="col-12 mb-4">
                                    <label for="{{ form.key_weak_points.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-exclamation-triangle text-danger"></i>{{ form.key_weak_points.label }}
                                    </label>
                                    {{ form.key_weak_points }}
                                    {% if form.key_weak_points.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.key_weak_points.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    <div class="form-text">
                                        该科目中需要重点突破的知识点或题型
                                    </div>
                                </div>

                                <div class="col-12 mb-4">
                                    <label for="{{ form.key_strengths.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-check-circle text-success"></i>{{ form.key_strengths.label }}
                                    </label>
                                    {{ form.key_strengths }}
                                    {% if form.key_strengths.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.key_strengths.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    <div class="form-text">
                                        已掌握较好的部分，可以保持的优势
                                    </div>
                                </div>

                                <div class="col-12 mb-4">
                                    <label for="{{ form.study_strategy.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-kanban text-primary"></i>{{ form.study_strategy.label }}
                                    </label>
                                    {{ form.study_strategy }}
                                    {% if form.study_strategy.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.study_strategy.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    <div class="form-text">
                                        针对性的学习方法和计划安排
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 学习资源与进度 -->
                        <div class="form-section">
                            <h5 class="section-title">
                                <i class="bi bi-journals"></i>学习资源与进度
                            </h5>
                            <div class="row">
                                <div class="col-12 mb-4">
                                    <label for="{{ form.primary_materials.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-book-half text-info"></i>{{ form.primary_materials.label }}
                                    </label>
                                    {{ form.primary_materials }}
                                    {% if form.primary_materials.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.primary_materials.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6 mb-4">
                                    <label for="{{ form.weekly_hours.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-clock text-primary"></i>{{ form.weekly_hours.label }}
                                    </label>
                                    <div class="time-input-group">
                                        {{ form.weekly_hours }}
                                        <span class="time-suffix">小时/周</span>
                                    </div>
                                    {% if form.weekly_hours.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.weekly_hours.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6 mb-4">
                                    <label for="{{ form.overall_progress.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-percent text-success"></i>{{ form.overall_progress.label }}
                                    </label>
                                    <div class="progress-input-group">
                                        {{ form.overall_progress }}
                                        <span class="progress-suffix">%</span>
                                    </div>
                                    {% if form.overall_progress.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.overall_progress.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                    <div class="progress-visual mt-2">
                                        <div class="progress-bar">
                                            <div class="progress-fill" id="progressFill" style="width: 0%"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 mb-4">
                                    <label for="{{ form.last_mock_score.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-pencil-square text-warning"></i>{{ form.last_mock_score.label }}
                                    </label>
                                    <div class="score-input-group">
                                        {{ form.last_mock_score }}
                                        <span class="score-suffix">分</span>
                                    </div>
                                    {% if form.last_mock_score.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.last_mock_score.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6 mb-4">
                                    <label for="{{ form.priority.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-flag text-danger"></i>{{ form.priority.label }}
                                    </label>
                                    {{ form.priority }}
                                    {% if form.priority.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.priority.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- 时间规划 -->
                        <div class="form-section">
                            <h5 class="section-title">
                                <i class="bi bi-calendar-event"></i>时间规划
                            </h5>
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <label for="{{ form.study_start_date.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-play-circle text-success"></i>{{ form.study_start_date.label }}
                                    </label>
                                    {{ form.study_start_date }}
                                    {% if form.study_start_date.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.study_start_date.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6 mb-4">
                                    <label for="{{ form.target_completion_date.id_for_label }}" class="form-label-custom">
                                        <i class="bi bi-flag-fill text-primary"></i>{{ form.target_completion_date.label }}
                                    </label>
                                    {{ form.target_completion_date }}
                                    {% if form.target_completion_date.errors %}
                                        <div class="invalid-feedback d-block">
                                            {% for error in form.target_completion_date.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- 备注信息 -->
                        <div class="form-section">
                            <h5 class="section-title">
                                <i class="bi bi-chat-left-text"></i>{{ form.notes.label }}
                            </h5>
                            <div class="mb-4">
                                {{ form.notes }}
                                {% if form.notes.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.notes.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>

                        <!-- 操作按钮 -->
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                            <a href="{% url 'users:student_detail' student.id %}" class="btn btn-back me-md-3">
                                <i class="bi bi-arrow-left me-2"></i>返回详情
                            </a>
                            <button type="submit" class="btn btn-save">
                                <i class="bi bi-save me-2"></i>{% if target_score %}更新目标{% else %}保存目标{% endif %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'users/js/target-score-form.js' %}"></script>
{% endblock %}